<template>
<header>
<div class="header-left">
<span class="iconfont">&#xe605;</span>
</div>
<div class="header-input">
<span class="iconfont">&#xe637;</span>
输入城市/景点/游玩/主题</div>
<router-link to="/city">
<div class="header-right">{{this.doubleCity}}
<span>&#xe6aa;</span>
</div>
</router-link>
</header>
</template>
<script>
import {mapState, mapGetters} from 'vuex'
export default {
  name: 'homeHeader',
  computed: {
    ...mapState(['city']),
    ...mapGetters(['doubleCity'])
  }
}
</script>
<style lang="stylus" scoped>
// 设置了html fontsize= 10px
@import '~styles/varibles.styl'
header
  display: flex
  height: $headerHeight
  line-height: $headerHeight
  background: $bgColor
  color: #fff
  font-Size: 1.6rem
.header-left
  width: 3.2rem
  padding-left: .7rem
  float: left
.header-input
  flex: 1
  font-size: 1.3rem
  background: #fff
  border-radius: .5rem
  margin-left: 1rem
  color: #ccc
  text-indent: .2rem
  height: 2.4rem
  line-height: 2.4rem
  margin-top: .5rem
  margin-bottom: .5rem
.header-right
  min-width: 6.0rem
  padding-left: .1rem
  float: right
  color: #fff
  text-align: center
</style>
